<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ article.title }}</title>
    <link href="{% static 'css/blog/blog.css' %}" rel="stylesheet">
    <link href="{% static 'css/blog/monokai.css' %}" rel="stylesheet">
    <link href="https://lib.baomitu.com/layui/2.7.6/css/layui.min.css" rel="stylesheet">
</head>
<body>
{% csrf_token %}
<div class="js-article-data" article-id="{{ article.id }}" title="{{ article.title }}" likes="{{ article.likes_number }}" like-state="{{ state }}" comments="{{ article.comments.count }}" hidden></div>
<div class="layui-col-xs11 layui-col-md9 layui-col-sm10 blog-content layui-anim layui-anim-downbit">
    <a href="javascript:window.history.back();" class="back"><i class="layui-icon layui-icon-left"></i> 返回</a>
    <h1 class="blog-title">{{ article.title }}</h1>
    <br>
    <div class="blog-info">
        <div class="column">
            <a href="{{ article.author.url }}" target="_blank"><img src="{{ article.author.avatar_url }}" alt>&nbsp;{{ article.author.username }}</a>
            <div class="time"><i class="layui-icon layui-icon-time"></i> 发布于 {{ article.datetime }}</div>
        </div>
        <div class="column tags">
            文章标签:
            {% for tag in article.tags.all %}
                <span class="tag layui-badge-rim">{{ tag.tag }}</span>
            {% empty %}
                无
            {% endfor %}
        </div>
    </div>
    <hr>
    <div id="content" class="layui-card-body main-content">
        {{ article.content_html | safe }}
    </div>
    <br><hr>
    <div class="blog-footer">
        <button type="button" class="layui-btn layui-btn-primary">
            <div class="time"><i class="layui-icon layui-icon-username"></i> {{ article.author.username }}</div>
        </button>
        <button type="button" class="layui-btn layui-btn-primary">
            <div class="time"><i class="layui-icon layui-icon-time"></i> 发布于 {{ article.datetime }}</div>
        </button>
        <button id="like" type="button" class="layui-btn layui-btn-primary">
            <i class="layui-icon layui-icon-heart layui-font-red" id="like-icon"></i>&nbsp;<span id="like-number"></span>
        </button>
    </div>
</div>
<div class="layui-col-xs11 layui-col-md9 layui-col-sm10 blog-content layui-anim layui-anim-upbit">
    <h2>评论</h2>
    <br>
    <button type="button" comment-type="article" content="{{ article.title }}" class="layui-btn layui-btn-primary submit-comment js-comment-btn"><i class="layui-icon layui-icon-reply-fill"></i>评论</button>
    <span>&nbsp;&nbsp;共 <strong id="comment-number">{{ article.comments.count }}</strong> 条评论</span>
    <br>
    <div id="comments">
    {% load mptt_tags %}
    {% recursetree article.comments.all %}
        {% with comment=node %}
            <div class="layui-panel comment layui-anim layui-anim-upbit">
                <img class="avatar" src="{{ comment.user.avatar_url }}" alt>
                <div class="comment-content">
                    <div class="js-comment-data" comment-id="{{ comment.id }}" root="{{ comment.is_root_node }}" comment-user="{{ comment.user.username }}" hidden></div>
                    <a href="{{ comment.user.url }}" target="_blank">{{ comment.user.username }}</a>
                        {% if comment.reply_to %}
                            <i class="layui-icon layui-icon-right arrow"></i><a href="{{ comment.reply_to.url }}" target="_blank">&nbsp;{{ comment.reply_to.username }}</a>
                        {% endif %}
                    <div class="content">{{ comment.content }}</div>
                    <button type="button" comment-type="user" class="layui-btn layui-btn-primary layui-btn-sm comment-btn js-comment-btn"><i class="layui-icon layui-icon-reply-fill"></i></button>
                    <div class="children">
                        {% if not comment.is_leaf_node %}{{ children }}{% endif %}
                    </div>
                </div>
            </div>
        {% endwith %}
    {% endrecursetree %}
    </div>
</div>
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.js"></script>
<script src="https://lib.baomitu.com/layui/2.7.6/layui.min.js"></script>
<script src="{% static 'js/notify.js' %}"></script>
<script src="{% static 'js/blog/article.js' %}"></script>
</body>
</html>